<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>作用域插槽</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>


<body>
    <div id="app">

        <h3>作用域插槽</h3>

        <hr/>

        <child-component>
            <!-- 这里的props只是一个临时变量，template 内可以通过临时变量 props 访问来自子组件插槽的数据 msg -->
            <template scope="props">
                <p>来自父组件的内容</p>
                <p>{{props.msg}}</p>
            </template>
        </child-component>

    </div>
</body>

<script type="text/javascript">
    // 注册组件
    Vue.component('child-component', {
        template: '<div class="container">\
                        <slot msg="来自子组件的内容"></slot>\
                    </div>'
    });

    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    var vm = new Vue({
        el: "#app"
    })
</script>

</html>